<!--
  使用：
      table attributes & table event 直接在父组件里写
      <base-table :tableObj="tableObj" :border="true" @row-click="handleRowClick"></base-table>
      tableObj: {
        tableData: [
            { '列key1': '值1', '列key2': '值2' },
            ...
        ],
        tableHeader: [
            // fixed: 默认false; showOverflowTooltip: 默认true;
            { label: '列名', value: '列key', children?: [], fixed?: '列属性', showOverflowTooltip?：'列属性', width?: '列宽', minWidth?: '列最小宽' },
            ...
        ]
      }
-->
<template>
  <el-table
    :data="props.tableObj.tableData"
    :border="true"
    class="base-table"
    :header-cell-style="setHeaderStyle"
    :cell-style="setCellStyle"
    :row-style="setRowStyle"
    row-key="id"
  >
    <el-table-column v-if="selection" type="selection" width="50" />
    <el-table-column v-if="sort" type="index" label="序号" width="60" />
    <slot name="prev"></slot>
    <table-column :tableHeader="props.tableObj.tableHeader"></table-column>
    <slot></slot>
  </el-table>
</template>
<script lang="ts" setup>
import TableColumn from './TableColumn.vue'
import { ElTable } from 'element-plus'
import type { TableObj } from './types'
// import { ref } from 'vue'
import type { PropType } from 'vue'
import tableStyle from '@/utils/table-style'

const props = defineProps({
  tableObj: {
    type: Object as PropType<TableObj>,
    default: () => {
      return {
        tableHeader: [],
        tableData: []
      }
    }
  },
  selection: {
    type: Boolean,
    default: false
  },
  sort: {
    type: Boolean,
    default: false
  },
  cellStyle: {
    type: String,
    default: ''
  },
  rowStyle: {
    type: String,
    default: ''
  }
})
// const baseTableRef = ref<InstanceType<typeof ElTable> | null>(null)

const setHeaderStyle = () => {
  return {
    backgroundColor: 'var(--el-svg-monochrome-grey)',
    color: '#000',
    height: '48px'
  }
}

const setCellStyle = ({ row, column, rowIndex, columnIndex }: any) => {
  const obj = {
    backgroundColor: 'var(--el-color-white)',
    color: 'rgba(0, 0, 0, 0.65)'
  }

  if (!props.cellStyle) {
    return obj
  }
  return tableStyle[props.cellStyle](
    { row, column, rowIndex, columnIndex },
    obj
  )
}

const setRowStyle = ({ row, rowIndex }: any) => {
  const obj = {
    height: '48px'
  }
  // if (rowIndex % 2 === 0) {
  //   obj.backgroundColor = "#fbfcfe";
  // } else {
  //   obj.backgroundColor = "#f4f8fb";
  // }
  if (!props.rowStyle) {
    return obj
  }
  return tableStyle[props.rowStyle]({ row, rowIndex }, obj)
}

// defineExpose({
//   baseTableRef
// })
</script>

<style lang="scss" scoped>
.base-table {
  :deep(.el-table__cell) {
    text-align: center;
  }

  :deep(thead) {
    color: #464c5b;
  }

  :deep(.el-popper) {
    max-width: 220px;
    white-space: normal;
  }
}
  // .el-tooltip__popper {
  //   max-width: 300px !important;
  // }

  /* 设置鼠标移入后的高亮颜色为透明，此时可实现鼠标滑入不高亮 */
  // .el-table tbody tr:hover > td {
  //   background-color: transparent !important;
  // }

  /* 取消表格底边框线 */
  // :deep(.el-table__inner-wrapper::before) {
  //   height: 0;
  // }
</style>
